<template>
  <div class="order_list">
    <div class="order_top">
      <van-sticky>
        <Header-Comp ref="header" title="订单记录" :leftIconCallback="returnBack" />
        <van-tabs v-model="active" @click="onClick">
          <van-tab title="返佣" />
          <van-tab title="补贴" />
        </van-tabs>
        <div class="order_title">
          超级会员订单邀请商户{{ active == 0 ? "返佣" : "补贴" }}记录
        </div>
      </van-sticky>
    </div>
    <div class="noInfo loading" v-show="showLoading">
      <img src="../../../assets/img/flow/loading.gif" class="img" alt />
    </div>
    <div class="order_content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <div class="list" v-if="list.length > 0">
            <div
              class="list_content"
              v-for="(item, index) in list"
              :key="index"
              @click="toDetail(item)"
            >
              <div class="left">
                <div class="title">
                  超级会员{{ item.orderTradeType == 1 ? "消费" : "退款" }}
                </div>
                <div class="time">{{ item.payTime }}</div>
              </div>
              <div
                :class="['right', item.orderTradeType == 1 ? '' : 'add']"
                v-if="active == 0"
              >
                {{ item.orderTradeType == 1 ? "-" : "+"
                }}{{ (item.commissionFee / 100).toFixed(2) }}
              </div>
              <div
                :class="['right', item.orderTradeType == 1 ? 'add' : '']"
                v-else
              >
                {{ item.orderTradeType == 1 ? "+" : "-"
                }}{{ (item.subsidyAmount / 100).toFixed(2) }}
              </div>
            </div>
          </div>
          <!-- <van-empty
            class="custom-image"
            :image="emptyImg"
            description="暂无数据"
          /> -->
          <fhb-empty
            v-else
            showEmptyImg
            :emptyImg="emptyImg"
          />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { rebateOrder, subsidyOrder } from "@/api/flow/index";
import { mapGetters } from "vuex";
export default {
  name:'surperInvitorsOrderList',
  data() {
    return {
      active: 0,
      filEmptyText:'',
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      queryParams: {
        superBusinessId: "",
        pageNum: 0,
        pageSize: 20,
      },
      showLoading: false,
      emptyImg: require("@/assets/img/empty-data.png"),
    };
  },
  computed: {
    ...mapGetters(["dateType", "keepLiveArr"]),
  },
  created() {
    this.queryParams.superBusinessId = this.$route.query.businessId;
    this.queryParams.merchantId = this.$route.query.merchantId;
    this.showLoading = true;
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        this.queryParams.pageNum++;
        if (this.refreshing) {
          this.queryParams.pageNum = 1;
          this.list = [];
          this.refreshing = false;
        }
        this.getData();
      }, 1000);
    },
    onClick() {
      this.showLoading = true;
      this.list = [];
      this.refreshing = true;
      this.onLoad();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    getData() {
      if (!this.queryParams.superBusinessId) {
        return;
      }
      let { active, queryParams } = this;
      if (active == 0) {
        rebateOrder(queryParams).then((result) => {
          let res = result.data;
          if (res.code == 0) {
            this.list = [...this.list, ...res.data.list];
            if (!res.data.hasNextPage) {
              this.finished = true;
            }
            this.loading = false;
            this.showLoading = false;
          } else {
            this.loading = false;
            this.showLoading = false;
          }
        });
      } else if (active == 1) {
        subsidyOrder(queryParams).then((result) => {
          let res = result.data;
          if (res.code == 0) {
            this.list = [...this.list, ...res.data.list];
            if (!res.data.hasNextPage) {
              this.finished = true;
            }
            this.loading = false;
            this.showLoading = false;
          } else {
            this.loading = false;
            this.showLoading = false;
          }
        });
      }
    },
    toDetail(item) {
      let {id,orderNo} = item
      this.$router.push({
        path: "/surperInvitorsOrderDetail",
        query: { type: this.active, id,orderNo },
      });
    },
    returnBack(){
      let { keepLiveArr } = this;
      if (keepLiveArr.indexOf("surperInvitorsOrderList") != -1) {
        keepLiveArr.splice(keepLiveArr.indexOf("surperInvitorsOrderList"), 1);
        this.$store.commit("setKeepLive", keepLiveArr);
      }
      this.$router.back();
    }
  },
};
</script>
<style lang="less" scoped>
@primary: #feb518;
.order_list {
  display: flex;
  height: 100vh;
  width: 100%;
  flex-direction: column;
  .noInfo {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    .img {
      width: 150px;
      height: 150px;
    }
  }
  .order_top {
    z-index: 111;
    /deep/.van-tabs__line {
      background-color: @primary !important;
    }
    /deep/.van-tab--active {
      color: @primary !important;
    }
    .order_title {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      padding: 30px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f9f9f9;
    }
  }
  .order_content {
    flex: 1;
    .list {
      width: 100%;
      padding: 0 33px;
      .list_content {
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        border-bottom: 1px solid #ececec;
        align-items: center;
        .left {
          .title {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #131313;
            margin-bottom: 30px;
          }
          .time {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
            opacity: 0.8;
          }
        }
        .right {
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #131313;
        }
        .add {
          color: @primary !important;
        }
      }
    }
  }
}
</style>